<template>
  <div>
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="getdemand(1)"
          type="primary"
          size="small"
        >
          查询结果
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="searchList"
          size="small"
          label-width="140px"
        >
          <el-form-item label="省份:">
            <el-select
              ref="searchprovince"
              v-model="provinceId"
              style="width: 203px"
              placeholder="请选择要搜索的省份"
              @change="showCity1"
              clearable
            >
              <el-option
                v-for="(item, index) in provinceOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="城市:">
            <el-select
              ref="searchcity"
              v-model="cityId"
              style="width: 203px"
              placeholder="请选择要搜索的城市"
              @change="showArea1"
              clearable
            >
              <el-option
                v-for="(item, index) in cityOptions1"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="地区:">
            <el-select
              ref="searcharea"
              @change="selectUpdate"
              v-model="areaId"
              style="width: 203px"
              placeholder="请选择要搜索的地区"
              clearable
            >
              <el-option
                v-for="(item, index) in areaOptions1"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="服务标签:">
            <el-select
              v-model="searchList.labelId"
              style="width: 203px"
              placeholder="请选择服务标签"
              clearable
            >
              <el-option
                v-for="(item, index) in labelOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始时间:">
            <el-date-picker
              v-model="searchList.startTime"
              type="date"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间:">
            <el-date-picker
              v-model="searchList.endTime"
              type="date"
              placeholder="选择结束时间"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="订单状态:">
            <el-select v-model="searchList.status" placeholder="请选择">
              <el-option
                v-for="item in statusoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-button
      type="primary"
      style="margin-top: 10px"
      @click="showDemand = true"
      >发布需求</el-button
    >
    <el-dialog title="发布需求" :visible.sync="showDemand" width="40%">
      <span
        ><el-card class="filter-container" shadow="never">
          <el-form
            :inline="true"
            :model="sendMessage"
            size="small"
            ref="sendMessage"
            :rules="rules"
            label-width="140px"
          >
            <el-form-item label="服务标签:" prop="labelId">
              <el-select
                v-model="sendMessage.labelId"
                style="width: 203px"
                placeholder="请选择服务标签"
                clearable
              >
                <el-option
                  v-for="(item, index) in labelOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="demand" label="需求描述:">
              <el-input
                style="width: 300px"
                v-model="sendMessage.demand"
                placeholder="请描述您的需求"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item label="省份:" prop="provinceId">
              <el-select
                ref="province"
                v-model="sendMessage.provinceId"
                style="width: 203px"
                placeholder="请选择要搜索的省份"
                @change="showCity"
                clearable
              >
                <el-option
                  v-for="(item, index) in provinceOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="城市:" prop="cityId">
              <el-select
                ref="city"
                v-model="sendMessage.cityId"
                style="width: 203px"
                placeholder="请选择要搜索的城市"
                @change="showArea"
                clearable
              >
                <el-option
                  v-for="(item, index) in cityOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="地区:" prop="areaId">
              <el-select
                ref="area"
                @change="selectUpdate"
                v-model="sendMessage.areaId"
                style="width: 203px"
                placeholder="请选择要搜索的地区"
                clearable
              >
                <el-option
                  v-for="(item, index) in areaOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="address" label="详细地址:">
              <el-input
                style="width: 300px"
                v-model="sendMessage.address"
                placeholder="请填写您的详细地址"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="email" label="邮箱:">
              <el-input
                style="width: 300px"
                v-model="sendMessage.email"
                placeholder="请填写您的邮箱"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="name" label="联系人姓名:">
              <el-input
                style="width: 300px"
                v-model="sendMessage.name"
                placeholder="请填写您的姓名"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="联系电话:">
              <el-input
                style="width: 300px"
                v-model="sendMessage.phone"
                placeholder="请填写您的联系电话"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item prop="person" label="人数:">
              <el-input
                style="width: 300px"
                v-model="sendMessage.person"
                placeholder="请填写人数需求"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item prop="price" label="一口价:">
              <el-input
                style="width: 300px"
                v-model="sendMessage.price"
                placeholder="请填写本次订单的一口价"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="time" label="约定时间:">
              <el-date-picker
                style="width: 300px"
                v-model="sendMessage.time"
                type="datetime"
                placeholder="请指定约定时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-form> </el-card
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDemand = false">取 消</el-button>
        <el-button type="primary" @click="(showDemand = false), sendDemand()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column prop="id" label="需求ID" width="100" align="center">
      </el-table-column>
      <el-table-column prop="labelName" label="标签" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="需求发起者"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" width="180" align="center">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180" align="center">
      </el-table-column>
      <el-table-column prop="demand" label="需求" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="person"
        label="所需人数"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="address" label="地址" width="180" align="center">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="time" label="预约时间" width="180" align="center">
      </el-table-column>
      <el-table-column label="状态" width="180" align="center">
        <template slot-scope="scope"
          ><el-tag type="info" v-if="scope.row.status == 'WAIT'">等待</el-tag>
          <el-tag type="danger" v-else-if="scope.row.status == 'CANCEL'"
            >取消</el-tag
          >
          <el-tag type="success" v-else>接受</el-tag></template
        >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            :disabled="scope.row.status == 'ACCEPT'"
            @click="deletDemand(scope.row.id)"
            >删除
          </el-button>
          <el-button
            size="mini"
            type="warning"
            :disabled="scope.row.status !== 'WAIT'"
            @click="cancelDemand(scope.row.id)"
            >取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="getdemand"
        layout="prev, pager, next"
        :page-count="pageCunt"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "adminHome",
  data() {
    return {
      searchList: {
        address: "",
        endTime: "",
        labelId: "",
        pageNum: "",
        pageSize: 5,
        startTime: "",
        status: "",
      },
      tableData: [],
      labelOptions: [],
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      cityOptions1: [],
      areaOptions1: [],
      statusoptions: [
        {
          value: "ACCEPT",
          label: "接受",
        },
        {
          value: "WAIT",
          label: "等待",
        },
        {
          value: "CANCEL",
          label: "取消",
        },
      ],
      sendMessage: {
        address: "",
        demand: "",
        labelId: "",
        person: "",
        price: "",
        time: "",
      },
      pageCunt: 1,
      currenPage: 1,
      provinceId: "",
      cityId: "",
      areaId: "",
      listLoading: true,
      showDemand: false,
      rules: {
        labelId: [{ required: true, message: "请选择标签", trigger: "blur" }],
        provinceId: [
          { required: true, message: "请选择省份", trigger: "blur" },
        ],
        cityId: [{ required: true, message: "请选择城市", trigger: "blur" }],
        areaId: [{ required: true, message: "请选择地区", trigger: "blur" }],
        address: [
          { required: true, message: "请填写详细地址", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请填写联系人姓名", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请填写联系电话", trigger: "blur" }],
        demand: [
          { required: true, message: "请填写具体需求", trigger: "blur" },
        ],
        person: [{ required: true, message: "请填写人数", trigger: "blur" }],
        price: [{ required: true, message: "请填写一口价", trigger: "blur" }],
        email: [{ required: true, message: "请填写邮箱", trigger: "blur" }],
        time: [{ required: true, message: "请填写约定时间", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getdemand(1);
    this.getLable();
    this.getProvince();
  },
  methods: {
    getProvince() {
      this.axios
        .get("api/user/sys/listProvince")
        .then((response) => {
          this.provinceOptions = response.data.value;
        })
        .catch((error) => {});
    },
    showCity(item) {
      this.sendMessage.areaId = "";
      this.sendMessage.cityId = "";
      this.cityOptions = [];
      this.areaOptions = [];
      if (item != 0) {
        this.axios
          .get("api/user/sys/listCity?provinceId=" + item)
          .then((response) => {
            this.cityOptions = response.data.value;
          })
          .catch((error) => {});
      }
    },
    showCity1(item) {
      this.areaId = "";
      this.cityId = "";
      this.cityOptions1 = [];
      this.areaOptions1 = [];
      if (item != 0) {
        this.axios
          .get("api/user/sys/listCity?provinceId=" + item)
          .then((response) => {
            this.cityOptions1 = response.data.value;
          })
          .catch((error) => {});
      }
    },
    showArea(item) {
      this.sendMessage.areaId = "";
      this.areaOptions = [];
      if (item != 0) {
        this.axios
          .get("api/user/sys/listArea?cityId=" + item)
          .then((response) => {
            this.areaOptions = response.data.value;
          })
          .catch((error) => {});
      }
    },
    showArea1(item) {
      this.areaId = "";
      this.areaOptions1 = [];
      if (item != 0) {
        this.axios
          .get("api/user/sys/listArea?cityId=" + item)
          .then((response) => {
            this.areaOptions1 = response.data.value;
          })
          .catch((error) => {});
      }
    },
    getdemand(pageNum) {
      this.searchList.pageNum = pageNum;
      if(this.$refs.searcharea.selected.label){
        this.searchList.address = this.$refs.searchprovince.selected.label + this.$refs.searchcity.selected.label + this.$refs.searcharea.selected.label
      }else if(this.$refs.searchcity.selected.label){
        this.searchList.address = this.$refs.searchprovince.selected.label + this.$refs.searchcity.selected.label
      }else if(this.$refs.searchprovince.selected.label){
        this.searchList.address = this.$refs.searchprovince.selected.label
      }
      this.currenPage = pageNum;
      this.listLoading = true;
      this.axios
        .get("api/user/demand/list", {
          params: this.searchList,
        })
        .then((response) => {
          this.tableData = response.data.value.data;
          if (
            response.data.value.total / 5 >
            Number.parseInt(response.data.value.total / 5)
          ) {
            this.pageCunt = Number.parseInt(response.data.value.total / 5) + 1;
          } else {
            this.pageCunt = Number.parseInt(response.data.value.total / 5);
          }
          this.listLoading = false;
        })
        .catch((error) => {});
    },
    getLable() {
      this.axios
        .get("api/user/label/list")
        .then((response) => {
          this.labelOptions = response.data.value;
          for (var i = 0; i < response.data.value.length; i++) {
            if (this.labelOptions[i].status != "NORMAL") {
              this.labelOptions.splice(i, 1);
            }
          }
        })
        .catch((error) => {});
    },
    deletDemand(id) {
      this.$confirm("是否确认删除该需求?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("api/user/auth/demand/delete?id=" + id)
            .then((response) => {
              if (response.data.code == "200") {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.getdemand(this.currenPage);
              }
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该操作",
          });
        });
    },
    cancelDemand(id) {
      this.$confirm("是否确认取消该需求?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post(
              "api/user/auth/demand/updateDemandStatus?id=" +
                id +
                "&status=CANCEL"
            )
            .then((response) => {
              if (response.data.code == "200") {
                this.$message({
                  message: "取消成功",
                  type: "success",
                });
                this.getdemand(this.currenPage);
              }
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该操作",
          });
        });
    },
    sendDemand() {
      this.$refs.sendMessage.validate((valid) => {
        if (valid) {
          var address =
            this.$refs.province.selected.label +
            this.$refs.city.selected.label +
            this.$refs.area.selected.label +
            this.sendMessage.address;
          this.axios
            .post(
              "api/user/auth/demand/insert?address=" +
                address +
                "&demand=" +
                this.sendMessage.demand +
                "&labelId=" +
                this.sendMessage.labelId +
                "&name=" +
                this.sendMessage.name +
                "&person=" +
                this.sendMessage.person +
                "&phone=" +
                this.sendMessage.phone +
                "&price=" +
                this.sendMessage.price +
                "&time=" +
                this.sendMessage.time +
                "&email=" +
                this.sendMessage.email
            )
            .then((response) => {
              if (response.data.code == "200") {
                this.$message.success("发布成功");
                this.getdemand(this.currenPage);
              }else{
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error(error);
            });
        } else {
          this.$message.error("请填写全部内容");
          return false;
        }
      });
    },
    selectUpdate(e) {
      this.$forceUpdate();
    },
    handleResetSearch() {
      this.searchList = {
        address: "",
        endTime: "",
        labelId: "",
        pageNum: "",
        pageSize: 5,
        startTime: "",
        status: "",
      };
      this.provinceId = "";
      this.cityId = "";
      this.areaId = "";
    },
  },
};
</script>